<template>
  <basic-layout show-tab-bar>
    <custom-nav-bar title="记账" />
    <nut-tabs v-model="charge.type" swipeable type="smile">
      <nut-tab-pane title="支出">
        <ul class="flex flex-row tagItemUl">
          <li
            v-for="(item, index) in DefaultTags"
            :key="index"
            class="tagItem"
            :class="selectOutItem.value === item.value ? 'selected' : ''"
            @tap="selectOut(item)"
          >
            <tagItem :tag-item="item"></tagItem>
          </li>
          <li class="tagItem" @tap="navigateToOther">
            <tagItem :tag-item="other"></tagItem>
          </li>
        </ul>
      </nut-tab-pane>
      <nut-tab-pane title="收入">
        <ul class="flex flex-row tagItemUl">
          <li
            v-for="(item, index) in defaultIncomeTags"
            :key="index"
            class="tagItem"
            :class="selectInItem.value === item.value ? 'selected' : ''"
            @tap="selectIn(item)"
          >
            <tagItem :tag-item="item"></tagItem>
          </li>
        </ul>
      </nut-tab-pane>
    </nut-tabs>

    <nut-cell
      :is-link="true"
      desc-text-align="left"
      :desc="charge.amount"
      title="金额:￥"
      @tap="showKeyBoard"
    ></nut-cell>
    <nut-input
      v-model="charge.note"
      placeholder="请写点备注吧~"
      clearable
      clear-size="14"
      show-word-limit
      max-length="20"
      :show-clear-icon="true"
      @focus="close"
    >
      <template #clear>
        <IconFont name="circle-close" size="12" @tap="charge.note = ''"></IconFont>
      </template>
    </nut-input>
    <view class="fjm">
      <nut-button type="primary" @tap="switchTabReport">
        <template #icon>
          <IconFont name="edit" class="nut-icon-am-jump nut-icon-am-infinite"></IconFont>
        </template>
        <nut-animate type="twinkle" :loop="true">提交</nut-animate>
      </nut-button>
    </view>
    <view v-if="visible" :style="`height:${dHeight}`"></view>
    <nut-number-keyboard
      ref="numberKeyboard"
      v-model:visible="visible"
      v-model="charge.amount"
      class="nut-number-k"
      maxlength="6"
      @close="close"
    ></nut-number-keyboard>
    <nut-popup v-model:visible="showRound" position="bottom" closeable round :style="{ height: '30%' }"></nut-popup>
  </basic-layout>
</template>

<script setup lang="ts">
import Taro, { switchTab } from '@tarojs/taro';
import { useAppStore } from '@/store';
import clone from '@/lib/clone';
import { defaultIncomeTags, defaultExpenseTags } from '@/constants/defaultTags';
import { useTagStore } from '@/store/modules/tag';
const appStore = useAppStore();
const charge = reactive({
  type: '0',
  //   支出0 收入1
  amount: '',
  note: '',
  tag: { name: 'food', value: '餐饮' }
});
const tagStore = useTagStore();
function switchTabReport() {
  if (Number(charge.amount) > 0) {
    tagStore.insertRecord(clone<RecordItem>(charge));
    tagStore.chosenselectOutItem = defaultExpenseTags[0];
    toZero();
    appStore.setActiveTab('/pages/report/index');
    switchTab({
      url: '../report/index'
    });
  } else {
    Taro.showToast({
      title: '金额必须大于0',
      icon: 'error'
    });
  }
}
const DefaultTags = computed(() => tagStore.tagList);
const selectOutItem = computed(() => tagStore.chosenselectOutItem);
function navigateToOther() {
  Taro.navigateTo({
    url: '../other/index'
  });
}
const numberKeyboard = ref<HTMLElement | null>(null);
const other = { name: 'add', value: '其他' };
const visible = ref(false);
const showRound = ref(false);
const dHeight = ref('');
function showKeyBoard() {
  visible.value = true;
  Taro.nextTick(() => {
    Taro.createSelectorQuery()
      .select('.nut-number-k .nut-popup.nut-popup--bottom')
      .boundingClientRect()
      .exec(res => (dHeight.value = `${res[0].height}px`));
  });
}
function close() {
  visible.value = false;
}

const selectInItem = ref(defaultIncomeTags[0]);
function selectOut(item: TagItem) {
  tagStore.chosenselectOutItem = item;
  charge.tag = item;
}
function toZero() {
  charge.amount = '';
  charge.note = '';
  if (Number(charge.type)) {
    charge.tag = selectInItem.value;
  } else {
    charge.tag = selectOutItem.value;
  }
}
watch(
  () => charge.type,
  () => toZero()
);
function selectIn(item: TagItem) {
  selectInItem.value = item;
  charge.tag = item;
}
definePageConfig({
  navigationBarTitleText: '记账'
});
</script>
<style>
.nut-number-k .nut-popup--bottom {
  bottom: var(--nut-tabbar-height, 50rpx);
  padding-bottom: env(safe-area-inset-bottom);
}

.tagItemUl {
  flex-wrap: wrap;
}

.tagItem {
  width: 25%;
  padding: 12px 0;
  font-size: 12px;
  display: flex;
  color: --nut-primary-color;
  flex-direction: column;
  align-items: center;
}
</style>
